<template>
  <!-- 导入结果弹窗 -->
  <vc-dialog v-model="show" width="40%" height="480px" title="导入完成" title-align="left" :closeOnClickOverlay="false">
    <div class="container">
      <div class="statistics">
        导入成功
        <span class="success-num">{{ data.successTotal }}</span>
        家企业，失败
        <span class="fail-num">{{ data.failTotal }}</span>
        家企业
      </div>
      <div class="table">
        <vc-table :height="320" :maxHeight="320" :tableData="data.importInfos" :columns="columns" :tableConfig="{ stripe: false, border: 'inner', size: 'mini' }" />
      </div>
      <div v-show="data.importInfos.length > 0" class="btns">
        <span class="confirm-btn" @click="batchAddMember">完成</span>
      </div>
    </div>
  </vc-dialog>
</template>

<script setup lang="ts">
import { type ImportResult, addMember } from '../apis';
import { useImportResultTable } from '../useTable';
import { VcMessage } from 'vc';

interface Props {
  modelValue: boolean;
  data: ImportResult;
  groupId: number;
  groupName: string;
}
const { modelValue, data, groupId, groupName } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'update:modelValue', val: boolean): void;
  (e: 'refresh'): void;
}>();

const show = computed({
  get() {
    return modelValue;
  },
  set(value) {
    emit('update:modelValue', value);
  }
});

const { columns } = useImportResultTable(groupName);

const batchAddMember = async () => {
  const ids = data.importInfos.map((info) => info.companyId).filter((id) => id);
  if (!ids.length) {
    show.value = false;
    return;
  }
  const res = await addMember(groupId, ids);
  if (res.code === 200) {
    VcMessage.success('添加成功');
    show.value = false;
    emit('refresh');
  } else if (res.code === 409003) {
    VcMessage.error(res.msg);
  } else {
    VcMessage.error('添加失败，请重试');
  }
};
</script>

<style lang="scss" scoped>
.container {
  padding-top: 12px;
  height: 100%;
  .statistics {
    margin: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    font-size: 14px;
    color: #333;
    background: rgba(0, 142, 244, 0.03);
    border-radius: 8px;
    .success-num {
      margin: 0 4px;
      color: #008ef4;
    }
    .fail-num {
      margin: 0 4px;
      color: #ff5959;
    }
  }
  .table {
    padding: 12px 20px;
    width: 100%;
  }
  .btns {
    position: absolute;
    right: 20px;
    bottom: 10px;
    .confirm-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 60px;
      height: 32px;
      font-size: 14px;
      color: #fff;
      background: #008ef4;
      border-radius: 4px;
      cursor: pointer;
    }
  }
}
</style>
